<template>
  <div class="articleQuery-container">
    <div class="header">
      <img src="images/202003/158441567703518330.jpg" alt="" />
    </div>
    <div class="container">
      <div class="header-wrapper"></div>
      <ul class="nav" v-if="false">
        <li>首页</li>
        <li>公司概况</li>
        <li>公司要闻</li>
        <li>基层动态</li>
        <li>综合信息</li>
        <li>安全生产</li>
        <li>经营管理</li>
        <li>电网发展</li>
        <li>政工工作</li>
        <li>领导讲话</li>
        <li>制度发布</li>
        <li>企业信息</li>
        <li>招标采购</li>
      </ul>
      <div class="form my-search">
        <el-form
          :model="queryParams"
          size="mini"
          ref="queryForm"
          :inline="true"
          label-width="68px"
        >
          <el-form-item label="类型" prop="type">
            <el-select
              v-model="queryParams.type"
              placeholder="搜索类型"
              clearable
              size="small"
            >
              <el-option
                v-for="(item, k) in typeOptions"
                :key="k"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="关键字" prop="keyword">
            <el-input
              v-model="queryParams.keyword"
              placeholder="关键字"
              clearable
              size="small"
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="article-box">
        <ul>
          <li class="article-item" v-for="(item, k) in articleList" :key="k">
            <div class="top">
              {{ k + 1 }}.
              <span
                @click="getArticleUrl(item)"
                style="color: #009a94; cursor: pointer"
                >{{ item.header }}
              </span>
              <span style="float: right; padding-right: 10px">{{
                item.createdDate
              }}</span>
            </div>
            <div class="bottom">
              <span style="font-weight: 700; margin-right: 4px">内容 : </span>
              <span v-text="item.text"></span>
            </div>
          </li>
        </ul>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { articleQuery } from "@/api/front/articleQuery.js";
import { articleViewUrl } from "@/api/content/mywork";
export default {
  name: "articleQuery",

  data() {
    return {
      queryParams: {
        keyword: "重点",
        pageNum: 1,
        pageSize: 10,
        type: "header",
        siteId: "531",
      },
      total: 0,

      typeOptions: [
        {
          label: "标题",
          value: "header",
        },
        {
          label: "全文",
          value: "body",
        },
      ],
      articleList: [],
    };
  },

  components: {},

  computed: {},

  mounted() {
    let query = this.$route.query;
    this.queryParams.keyword = query.keyword;
    this.queryParams.type = query.type;
    this.queryParams.siteId = query.siteId;
    this.getList();
  },

  watch: {
    value: {
      handler(val) {},
      deep: true,
      immediate: true,
    },
  },

  methods: {
    getList() {
      const loading = this.$loading({
        lock: true,
        fullscreen: false,
        text: "正在查询，请稍后...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      articleQuery(this.queryParams).then((res) => {
        console.log(res);
        let dom = document.createElement("div");
        this.articleList = res.data.list.map((item) => {
          dom.innerHTML = item.body;
          item.text = dom.innerText;
          return item;
        });

        this.total = res.data.totalCount;
        loading.close();
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    //文章标题跳转文章页面
    getArticleUrl(row) {
      articleViewUrl({
        articleId: row.articleId,
      }).then((res) => {
        let href = res.msg;
        window.open(href, "_blank");
      });
    },
  },
};
</script>

<style scoped lang="scss">
.articleQuery-container {
  .header {
    height: 200px;
  }

  .container {
    width: 1000px;
    margin: 0 auto;
    .header-wrapper {
      border-bottom: rgb(12, 174, 174) 4px solid;
      margin: 0px auto;

      height: 4px;
      background: #f7f9fa;
      overflow: hidden;
    }
    .nav {
      height: 60px;
      border: 1px solid #ccc;
      display: flex;
      justify-content: space-around;
      align-items: center;
      li {
      }
    }
    .form {
    }
    .article-box {
      ul {
        border: 1px solid #ccc;
        li {
          border-bottom: 1px solid #ccc;
          padding: 10px;
          .top {
            // height: 30px;
            line-height: 30px;
            font-size: 18px;
          }
          .bottom {
            font-size: 16px;
            line-height: 30px;
            font-family: 微软雅黑;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
          }
          &:last-child {
            border: none;
          }
        }
      }
    }
  }
}
</style>
